<template>
	<!-- 连麦组件 -->
	<view v-if="lianmai" class="lianmai-box">
		<view class="box">
			<view class="close" @click="close">
				<image class="mg" src="@/static/live/closewheat.png" mode="scaleToFill" />
			</view>
			<view class="img">
				<image class="img" :src="lianmaiInfo.avatarUrl" mode="scaleToFill" />
			</view>
			<text class="nickname">{{lianmaiInfo.nickName}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			lianmai: {
				type: Boolean,
				default: false
			},
			lianmaiInfo: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {

			}
		},
		methods: {
			close() {
				this.$emit("closeLianMai")
			}
		},
	}
</script>

<style lang="scss" scoped>
	// 公共图片样式
	.mg {
		width: 22rpx;
		height: 22rpx;
	}

	// 整体盒子
	.lianmai-box {
		width: 190rpx;
		height: 190rpx;
		border-radius: 10rpx;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		right: 30rpx;
		bottom: 156rpx;
	}

	.box {
		padding: 10rpx;
		position: relative;
		width: 190rpx;
		height: 190rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close {
		width: 22rpx;
		height: 22rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}

	.img {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}

	.nickname {
		position: absolute;
		bottom: 10rpx;
		left: 20rpx;
		font-size: 22rpx;
		color: #fff;
	}
</style>